<template>
  <div class="app">
    <!--导航栏区-->
    <div class="navigate" v-show="show">
      <ul>
        <li>
          <RouterLink to="/info" active-class="active" class="menu-item"
            >个人信息</RouterLink
          >
        </li>
        <li>
          <RouterLink to="/arrange" active-class="active" class="menu-item"
            >排课管理</RouterLink
          >
        </li>
        <li>
          <RouterLink to="/signup" active-class="active" class="menu-item"
            >各类报名</RouterLink
          >
        </li>
      </ul>
    </div>
    <!--展示区-->
    <div class="show">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="App">
import { RouterLink, RouterView } from "vue-router";
import { ref } from "vue";

let show = ref(false);

function turnTo() {
  show.value = true;
}
</script>

<style>
.app {
  display: flex;
}
.navigate {
  flex: 1;
}
.navigate li {
  list-style-type: none;
  padding: 20px;
}
.navigate.menu-item {
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
.navigate.a {
  text-decoration: none;
}
.show {
  flex: 6;
  height: 600px;
}
.active {
  border-left: 5px solid rgb(4, 49, 133);
}
.menu-item {
  text-decoration: none;
}
button {
  margin: 5px;
}
</style>
